<!--
 * @Description: 拖拽源
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2021-11-29 14:25:31
 * @LastEditTime: 2021-11-30 15:15:34
-->
<template>
    <div class="list-box">
        <div v-for="item in list" :key="item.name" draggable @dragstart="dragstart($event,item)">
            {{item.name}}</div>
    </div>
</template>

<script>
export default {
    name: 'draglist',
    data() {
        return {
            list: [
                { id: '1', name: 'test1' },
                { id: '2', name: 'test2' },
                { id: '3', name: 'test3' },
                { id: '4', name: 'test4' },
            ],
        }
    },
    methods: {
        dragstart(e, item) {
            e.dataTransfer.setData('data', JSON.stringify(item))
        },
    },
}
</script>
<style lang="scss" scoped>
.list-box {
    div {
        line-height: 40px;
        border: 1px solid #ccc;
    }
    div + div {
        margin-top: 10px;
    }
}
</style>
